<template>
  <div class="context">


    <div class="cardheard">

      <div style="margin-right: 15px; width:400px">
        <el-input placeholder="请输入用户手机号" v-model="userid" class="input-with-select">
          <el-button @click="selectOne" slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>
    <!--搜索框-->
    <!-- <el-input style="width: 400px; margin: 20px 20px 20px 20px" v-model="inputValue" placeholder="请输入内容"
      prefix-icon="el-icon-search">
    </el-input> -->
    <!-- <el-button type="primary" @click="showadd" style="height: 40px; margin: 0px 0px 0px 20px">
      批量添加</el-button> -->

    <template>
      <el-table :data="Users" style="width: 100%" height="80%">
        <el-table-column type="index" width="50">
        </el-table-column>
        <!-- <el-table-column label="ID">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column> -->

        <el-table-column label="账号">
          <template slot-scope="scope">
            <span>{{ scope.row.userid }}</span>
          </template>
        </el-table-column>


        <!-- <el-table-column label="用户身份">
          <template slot-scope="scope">
            <span>{{ scope.row.identityName }}</span>
          </template>
        </el-table-column> -->


        <el-table-column label="累计收益">
          <template slot-scope="scope">
            <span>{{ scope.row.totalMoney }}</span>
          </template>
        </el-table-column>


        <el-table-column label="账号余额">
          <template slot-scope="scope">
            <span>{{ scope.row.money }}</span>
          </template>
        </el-table-column>


        <el-table-column label="卡密到期日期">
          <template slot-scope="scope">
            <span v-show="scope.row.vip != 0">{{ timestampToTime(scope.row.vip) }}</span>
            <span v-show="scope.row.vip == 0">暂未开通</span>
          </template>
        </el-table-column>


        <el-table-column label="分佣到期日期">
          <template slot-scope="scope">
            <span v-show="scope.row.invite != 0">{{ timestampToTime(scope.row.invite) }}</span>
            <span v-show="scope.row.invite == 0">暂未开通</span>
          </template>
        </el-table-column>




        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-button type="text" @click="looknote(scope.$index, scope.row)" size="small">查看</el-button> -->
            <el-button type="text" @click="showCashRecord(scope.row)" size="small">提现明细</el-button>
            <el-button type="text" @click="showDetailMoney(scope.row)" size="small">收益明细</el-button>
            <el-button type="text" @click="showUserInfo(scope.row)" size="small">管理</el-button>
            <!-- <el-button type="text" size="small">删除</el-button> -->
            <!-- <el-button @click="delcoin(scope.$index, scope.row)" type="text" size="small">重置收益</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </template>

    <template>
      <el-dialog title="提现明细" :visible.sync="cashRecord" width="50%" center>
        <div style="height: 450px;">
          <el-table :data="UsersCashRecoed" style="width: 100%" height="530">
            <el-table-column type="index" width="50">
            </el-table-column>

            <el-table-column label="提现日期">
              <template slot-scope="scope">
                <span>{{ scope.row.time }}</span>
              </template>
            </el-table-column>


            <el-table-column label="提现金额">
              <template slot-scope="scope">
                <span>{{ scope.row.money }}</span>
              </template>
            </el-table-column>

            <el-table-column label="提现信息">
              <template slot-scope="scope">
                <span>{{ scope.row.info }}</span>
              </template>
            </el-table-column>

            <el-table-column label="拒绝理由">
              <template slot-scope="scope">
                <span>{{ scope.row.reason }}</span>
              </template>
            </el-table-column>


            <el-table-column label="状态">
              <template slot-scope="scope">
                <!-- <span>{{ scope.row.status }}</span> -->
                <el-tag v-if="scope.row.status == 0">待审核</el-tag>
                <el-tag type="success" v-if="scope.row.status == 1">已打款</el-tag>
                <el-tag type="danger" v-if="scope.row.status == 2">拒绝申请</el-tag>
              </template>
            </el-table-column>

          </el-table>
        </div>
        <div slot="footer" class="dialog-footer">
          <div class="block">
            <el-pagination @current-change="handleCurrentChange3" background layout="prev, pager, next" :total="10000">
            </el-pagination>
          </div>
        </div>



      </el-dialog>
    </template>

    <template>
      <el-dialog title="收益明细" :visible.sync="detailmoney" width="50%" center>
        <div style="height: 300px;">
          <el-table :data="UsersDetailMoney" height="380">
            <el-table-column type="index" width="50">
            </el-table-column>

            <el-table-column label="用户">
              <template slot-scope="scope">
                <span>{{ scope.row.iphone }}</span>
              </template>
            </el-table-column>


            <el-table-column label="设备imei">
              <template slot-scope="scope">
                <span>{{ scope.row.imei }}</span>
              </template>
            </el-table-column>

            <el-table-column label="设备型号">
              <template slot-scope="scope">
                <span>{{ scope.row.model }}</span>
              </template>
            </el-table-column>

            <el-table-column label="单价">
              <template slot-scope="scope">
                <span>{{ scope.row.money }}</span>
              </template>
            </el-table-column>

            <el-table-column label="上传时间">
              <template slot-scope="scope">
                <span>{{ scope.row.time }}</span>
              </template>
            </el-table-column>


          </el-table>
        </div>
        <div slot="footer" class="dialog-footer">
          <div class="block">
            <el-pagination @current-change="handleCurrentChange2" background layout="prev, pager, next" :total="10000">
            </el-pagination>
          </div>
        </div>



      </el-dialog>
    </template>

    <template>
      <el-dialog title="个人信息" :visible.sync="UserInfo" width="25%" center>
        <div style="height: 450px;">
          <el-form  :inline="true"  label-width="80px">

            <el-form-item label="用户账号:" label-width="200">
              <label>{{ UserInfoDetail.userid }}</label>
            </el-form-item>

            <el-form-item label="当前vip到期时间" label-width="200">
              <label>{{ timestampToTime(UserInfoDetail.vip) }}</label>
            </el-form-item>

            <el-form-item label="分佣到期时间" label-width="200">
              <label>{{ timestampToTime(timestamp2) }}</label>
            </el-form-item>

            <el-form-item label="邀请人:" label-width="200">
              <label>{{ UserInfoDetail.recommend }}</label>
            </el-form-item>

            <el-form-item label="账户余额:" label-width="200">
              <el-input v-model="inputMoney" clearable>
              </el-input>
              <!-- <label >{{ timestampToTime(UserInfoDetail.vip) }}</label> -->
            </el-form-item>

            <el-form-item label="修改卡密到期时间:" label-width="200">
                <el-date-picker v-model="vipTime" type="date" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="修改分佣到期时间:" label-width="200">
              <el-date-picker v-model="shareTime" type="date" placeholder="选择日期">
              </el-date-picker>
          </el-form-item>

            <el-button type="success" round @click="changeUser">保存所有</el-button>

          </el-form>

        </div>

      </el-dialog>
    </template>

  </div>
</template>

<script>
export default {
  data() {
    return {
      shareTime:"",//分佣到期时间
      UsersCashRecoed: [],
      detailuserid: "",//当前用户id明细
      UsersDetailMoney: [],//收益明细
      inputMoney: "",//输入的余额
      userid: "",
      vipTime: "",//修改的VIP到期时间
      timestamp: "",//当前vip到期时间
      timestamp2: "",//当前分佣到期时间
      data: [],
      formLabelWidth: "120px",
      newtable: {
        header: "",
        begin: "",
        end: ""
      },
      detailmoney: false,//收益面板
      UserInfo: false,//用户详情面板
      cashRecord: false,//提现面板
      pagecount: 99,//查询的总数
      currentPage4: 4,
      Users: [],//用户数据数组
      UserInfoDetail: {
        userid: "",
        vip: "",

      },//单个用户信息
      req: {
        "pageIndex": 0,
        "pageCount": 10
      },
      req2: {
        "pageIndex": 0,
        "pageCount": 20
      },
      req3: {
        "pageIndex": 0,
        "pageCount": 20
      }
    };
  },

  created() {
    var that = this;
    console.log("Vue 初始化完成 created");
    this.pushdata();
  },

  methods: {
    changeUser() {
      console.log(this.vipTime);
      var changeTime = ""
      if (this.vipTime == "") {
        changeTime = this.timestamp
      } else {
        changeTime = (this.vipTime).valueOf() / 1000;
      }

      var changeShareTime = ""
      if (this.shareTime == "") {
        changeShareTime = this.timestamp2
      } else {
        changeShareTime = (this.shareTime).valueOf() / 1000;
      }

      var that = this;
      this.$axios.post("/api/User/UpdateUser", {
        "userid": that.UserInfoDetail.userid,
        "vip": changeTime,
        "money": that.inputMoney,
        "invite":changeShareTime//分佣权限到期时间
      })
        .then(function (response) {
          console.log(response.data);
          if (response.data.code == 200) {
            that.$message.success(response.data.mes);
          } else {
            that.$message.error(response.data.mes);
          }
        })
        .catch(function (error) {
          that.$message.error('网络链接超时！');
          console.log(error);
        });
      that.UserInfo = false

    },
    showUserInfo(row) {
      this.UserInfoDetail = row
      this.UserInfo = true
      this.inputMoney = row.money
      this.timestamp = row.vip
      this.timestamp2 = row.invite
    },

    getDetailMoney() {
      var that = this;
      this.$axios.post("/api/Money/getMoneyRecord", {
        "userid": that.detailuserid,
        "pageIndex": that.req2.pageIndex,
        "pageCount": that.req2.pageCount,
      })
        .then(function (response) {
          console.log(response.data);
          if (response.data.code == 200) {
            that.UsersDetailMoney = response.data.data
            console.log(response.data.data);
          } else {
            that.$message.error(response.data.mes);
          }
        })
    },
    showCashRecord(row) {
      this.detailuserid = row.userid
      //console.log(row);
      this.cashRecord = true
      this.getCashDetailDetail()
    },
    getCashDetailDetail() {
      var that = this;
      this.$axios.post("/api/Money/getCashRecord", {
        "userid": that.detailuserid,
        "pageIndex": that.req3.pageIndex,
        "pageCount": that.req3.pageCount,
      })
        .then(function (response) {

          console.log(response.data);
          if (response.data.code == 200) {
            that.UsersCashRecoed = response.data.data
          } else {
            that.$message.error(response.data.mes);
          }
        })
        .catch(function (error) {
          that.$message.error('网络链接超时！');
          console.log(error);
        });
    },

    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);

      if (val != 1) {
        var statcount = (val - 1) * this.req2.pageCount
        this.req2.pageIndex = statcount
        console.log("当前开始index--" + statcount);
      } else {
        this.req2.pageIndex = 0
        console.log("当前开始index--" + statcount);
      }
      this.getDetailMoney()
    },
    //提现记录分页
    handleCurrentChange3(val) {
      console.log(`当前页: ${val}`);

      if (val != 1) {
        var statcount = (val - 1) * this.req3.pageCount
        this.req3.pageIndex = statcount
        console.log("当前开始index--" + statcount);
      } else {
        this.req3.pageIndex = 0
        console.log("当前开始index--" + statcount);
      }
      this.getCashDetailDetail()
    },
    showDetailMoney(row) {
      this.detailuserid = row.userid
      //console.log(row);
      this.detailmoney = true
      this.getDetailMoney()
    },
    timestampToTime(timestamp) {
      // 时间戳为10位需*1000，时间戳为13位不需乘1000
      var date = new Date(timestamp * 1000);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },


    delcoin(index, row) {
      var that = this;
      that.$axios
        .post("/api/Money/delCoin", {
          userid: row.userid,
          money: row.money
        })
        .then(function (response) {
          console.log(response.data);
          that.$message.success({
            message: "操作成功"
          });
        })
        .catch(function (error) {
          console.log(error);
          that.$message({
            message: "操作失败"
          });
        });
    },
    selectOne() {
      if (this.userid != "") {
        this.selectById()
      } else {
        this.pushdata()
      }
    },
    selectById() {
      var that = this;
      this.$axios.post("/api/User/show", {
        "userid": that.userid,
        "pageIndex": that.req.pageIndex,
        "pageCount": that.req.pageCount,
      })
        .then(function (response) {

          console.log(response.data);
          if (response.data.code == 200) {
            that.Users = response.data.data
          } else {
            that.$message.error(response.data.mes);
          }
        })
        .catch(function (error) {
          that.$message.error('网络链接超时！');
          console.log(error);
        });
    },
    showadd() {
      this.dialogresetVisible = true
    },
    addusers() {

      for (let index = this.newtable.begin; index < this.newtable.end; index++) {
        var user = {
          uid: this.newtable.header + index,
          password: this.newtable.header
        }
        this.data.push(user)
      }
      var that = this;
      that.$axios
        .post("/api/User/addUser", {
          users: that.data
        })
        .then(function (response) {
          console.log(response.data);
        })
        .catch(function (error) {
          console.log(error);
          that.$message({
            message: "添加失败"
          });
        });


    },
    next(a) {
      console.log(a);
    },
    reset() {
      this.req = {
        "pageIndex": 0,//每次请求数据的开始位置
        "pageCount": 10//每次请求数据的总量
      }
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

      if (val != 1) {
        var statcount = (val - 1) * this.req.pageCount
        this.req.pageIndex = statcount
        console.log("当前开始index--" + statcount);
      } else {
        this.req.pageIndex = 0
        console.log("当前开始index--" + statcount);
      }

      console.log(this.req);
      this.pushdata()
    },

    pushdata() {
      var that = this;
      this.$axios.post("/api/User/show", {
        "pageIndex": that.req.pageIndex,
        "pageCount": that.req.pageCount,
      })
        .then(function (response) {

          console.log(response.data);
          if (response.data.code == 200) {
            that.Users = response.data.data
          } else {
            that.$message.error(response.data.mes);
          }
        })
        .catch(function (error) {
          that.$message.error('网络链接超时！');
          console.log(error);
        });
    }
  }
};
</script>

<style scoped></style>
